import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild } from "@angular/core";
import { ChartSliderDirective } from "../../../../../../../shared/directives/charts/chartSlider.directive";
import { BaseCriteriaTemplateComponent } from "../baseType.component";
import { ReportingService } from "../../../../../reporting.service";
import { Subscription } from "rxjs";
import { ICriteriaTemplate, TemplateType } from "../../models/criteriaTemplate.interface";
import { ICriteriaOutput } from "../../models/save/criteriaOutput.interface";
import { HistogramOutput } from "../../models/save/criteriaOutput.model";

@Component({
    selector: 'type16',
    templateUrl: 'type16.component.html',
    styleUrls: ['../../templateCriteria.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [{ provide: BaseCriteriaTemplateComponent, useExisting: Type16Component }]
})
export class Type16Component extends BaseCriteriaTemplateComponent implements ICriteriaTemplate {
    private sub: Subscription;
    private loadSub: Subscription;

    public type: TemplateType = TemplateType.Histogram;

    @ViewChild(ChartSliderDirective) private chart: ChartSliderDirective;

    public start: number;

    public end: number;

    public chartData: any[];

    constructor(
        private toolsService: ReportingService,
        private cdRef: ChangeDetectorRef) {
        super(toolsService, cdRef);
    }

    ngOnInit() {
        //load data        
        this.sub = this.toolsService.getCriteria(this.templateCriteria.id, 16, true).subscribe(data => {
            this.chartData = data.criteriaData;
            if (this.chartData.length > 0) {
                this.start = this.chartData[0].xAxisValue;
                this.end = this.chartData[data.criteriaData.length - 1].xAxisValue;
                this.chart.enableZoom = true;
                if (this.edit == 'true')
                    this.loadIntervalData('type16MinValue', 'type16MaxValue');
                else
                    this.cdRef.markForCheck();
            }
        });

        //load interval                
        this.loadSub = this.load.subscribe(data => {
            this.chart.enableZoom = false;
            this.start = data.min;
            this.end = data.max;
            this.valueChange();
            this.cdRef.markForCheck();
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
        this.loadSub.unsubscribe();
    }

    public intervalChanged(event: any) {
        this.start = event.start;
        this.end = event.end;
        BaseCriteriaTemplateComponent.changed.emit(true);
    }

    public valueChange() {
        if (!isNaN(Number(this.start)) && !isNaN(Number(this.end)))
            this.chart.setZoom(Number(this.start), Number(this.end));
    }

    //TODO: for a more elegant code, rewrite this restriction
    public digitsOnly(event: any) {
        const pattern = /[0-9\+\-\ ]/;
        let inputChar = String.fromCharCode(event.charCode);

        if (!pattern.test(inputChar)) {
            // invalid character, prevent input
            event.preventDefault();
        }
    }

    public save(): ICriteriaOutput {
        return new HistogramOutput(Math.min(this.start, this.end), Math.max(this.start, this.end));
    }
}